<template>
  <div class="_wz_terraceLogin">
    <Layout style="height: 100%;">
      <Sider hide-trigger class="_wz_main_left">
        <div class="_wz_main_leftOne" style="overflow: auto;">
<!--          <img src="../../assets/logo3.png" class="_wz_main_logo" @error="public.imgDispose" />-->
          <div style="padding: 30px 0 0 0;">
            <viewer style="width: 60px;height: 60px;margin: auto;display: block;">
              <img style="width: 60px;height: 60px;margin: auto;display: block;border-radius: 50%;background: #fff;border: 1px solid #fff;" :src="!!userInfoData&&!!userInfoData.logoUrl?apiUrl.imgUrl+userInfoData.logoUrl:'../../static/img/touxiang.png'" @error="public.imgDispose">
            </viewer>
            <div style="padding: 20px;line-height: 25px;letter-spacing: 1px;text-align: center;cursor: pointer;">
              <div @click="personalCenter">
                <i class="fa fa-user"></i> {{ !!userInfoData ? userInfoData.name : '欢迎使用' }}
              </div>
              <template v-if="!!userInfoData && !!userInfoData.coreDeptEntity">
                <div class="_wz_deptPortrait" v-if="userInfoData.coreDeptEntity.typeCode != '1109'" @click.stop="deptPortrait">企业画像</div>
              </template>
            </div>

            <div class="_wz_user_operate">
              <i class="fa fa-home fa-fw" @click="homeFun"></i>
              <Divider type="vertical" />
<!--              <Badge dot v-if="messageState">-->
<!--                <i class="fa fa-bell" @click="noticeFun" style="font-size: 14px;"></i>-->
<!--              </Badge>-->
<!--              <i class="fa fa-bell" @click="noticeFun" style="font-size: 14px;" v-else></i>-->
<!--              <Divider type="vertical" />-->
              <i class="fa fa-android" @click="handleView"></i>
              <Divider type="vertical" />
              <i class="fa fa-sign-out" @click="logOffFun"></i>
            </div>
          </div>
          <div class="_wz_navParent">
            <template v-for="item in platformList">
              <div :name="item.id" @click="platformSelect(item)" :class="{_wz_navParent_select : actionData.id == item.id}">
                <Icon type="md-desktop" v-if="item.moduleStatus == 1" :style="item.moduleStatus != 1?'color: #f00;':''" />
                <Icon type="ios-construct" v-else />
                {{ item.moduleName }}
              </div>
            </template>
          </div>
          <div class="_wz_operationHelp" @click="viewHelp">操作帮助</div>
        </div>
      </Sider>
      <Layout>
        <Header v-if="actionData.id != 999 && actionData.id != 998" :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)',padding: '0 20px'}">
          <wz-Nav ref="wzNav" :menuList="actionData" v-if="actionData.menus.length > 0 && navType"></wz-Nav>
        </Header>
        <Content class="content-wrapper" :style="{padding: '24px',padding: '0px',height:' calc(100% - 80px)',overflow: 'auto'}">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </Content>
        <Footer style="z-index: 999;padding: 0px;height: 30px;position: relative;">
          <div class="_wz_foot">
           <span>
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=13050902000086">
              <img src="../../assets/icon_Record.png" />
              冀公网安备 13050902000086号
            </a>
            </span>
            <span>
              <a href="https://beian.miit.gov.cn/" target="_blank">冀ICP备18004049号</a>
            </span>
<!--            <span>CopyRight © 河北信达交通科技有限公司</span><span>技术支持：河北信达交通科技有限公司</span>-->
          </div>
        </Footer>
      </Layout>
    </Layout>
    <Modal v-model="loginBoxType" :closable="false" :mask-closable="false" :footer-hide="true" width="400" class-name="_wz_login">


    </Modal>

    <Drawer title="查看帮助" v-model="viewHelpType" width="700" :draggable="true" @on-close="$store.dispatch('setViewHelpSrc', '')">
      <materialVideo v-if="viewHelpType" :materialData="materialData" :old="true"></materialVideo>
    </Drawer>


    <!--APP应用下载-->
    <Modal title="APP应用下载" v-model="visible" :footer-hide="true" width="800">
      <Row style="padding: 30px 0;">
        <i-col span="12">
          <div id="qrcode1" class="_wz_qrcode" ref="qrcode1" style="width:232px;height: 232px;margin:auto;display: block;"></div>
          <div style="font-size: 20px;letter-spacing: 2px;text-align: center;line-height: 60px;">交通运输安全生产综合监测平台</div>
        </i-col>
        <i-col span="12">
          <div id="qrcode2" class="_wz_qrcode" ref="qrcode2" style="width:232px;height: 232px;margin:auto;display: block;"></div>
          <div style="font-size: 20px;letter-spacing: 2px;text-align: center;line-height: 60px;">信达宝驾</div>
        </i-col>
      </Row>
    </Modal>

    <Modal v-model="mainNoticeData.length > 0" :footer-hide="true" class-name="_wz_main_notice" width="800">
      <Carousel autoplay v-model="noticeValue" @on-change="haveReadRequests" class="_wz_main_carousel" loop v-if="mainNoticeData.length > 0" :autoplay-speed="5000" dots="none">
        <template v-for="item in mainNoticeData">
          <CarouselItem style="width: 800px;">
            <div class="_wz_main_notice_div" @click="noticeDetails(item)">
              <img :src="apiUrl.imgUrl+item.noticeImg" @error="public.imgDispose">
            </div>
          </CarouselItem>
        </template>
      </Carousel>

    </Modal>


    <Drawer v-model="modal" title="通知详情" width="700" :draggable="true">
      <div v-if="modal" style="height: 100%;width: 100%;overflow: hidden;">
        <iframe :src="noticeData.noticeHtml" style="border: 0px;width: 100%;height: 100%;"></iframe>
      </div>
    </Drawer>

  </div>
</template>
<script>
import wzNav from './nav.vue'
import materialVideo from "../../view/educate/public/materialVideo";

export default {
  components: {
    wzNav,//菜单
    materialVideo,
  },
  provide() {
    return {
      updatingUserData: this.updatingUserData//更新用户方法
    }
  },
  data() {
    return {
      noticeData:{},//通知地址
      modal:false,//通知弹框
      noticeValue:0,//已读消息 第几个
      mainNoticeData:[],//已读消息list
      visible: false,
      viewHelpType: false,//查看帮助
      materialData: {},//查看帮助视频
      loginBoxType: false,//登录框状态
      navType: false,//菜单状态 强制刷新
      actionData: {
        menus: []
      },//头部选中
      platformList: [],//头部项目
      include: "",//缓存页面使用  组件名称
      listNav: [],//tabs用
      navId: "",//tabs用
      deptType: false,

      value: false,
      userInfoData: null,//用户信息
      instantMessaging: null,//及时消息定时
    }
  },
  computed: {//计算属性
    viewHelpSrc: function () {
      return this.$store.getters.getViewHelpSrc;
    },
    messageRemind: function () {//
      return this.$store.getters.getMessageRemind;
    },
    messageState: function () {//消息的未读状态  有未读就是 true
      return this.$store.getters.getMessageState;
    },
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;


    /*
    * 隐患排查 关停
    * 1.弹出一次
    * 2.手动关闭
    * 3.3-31
    * */
    let timeDate = new Date().getTime() < new Date('2022-03-31 23:59:59').getTime()
    if(!localStorage.getItem("hiddenDangerDetectionNotice") && timeDate){
      that.$Notice.warning({
        title: '隐患排查公告',
        duration:0,
        desc: '尊敬的用户，因“隐患排查”功能升级维护，新版的隐患排查升级到左侧“隐患排查管理”，现有的“安全生产管理-隐患排查”将于2022-03-31停止服务，由此造成的不便敬请谅解！'
      });
    }
    localStorage.setItem("hiddenDangerDetectionNotice", 'true');



    //全局右侧弹出通知提醒
    that.axios.post(that.apiUrl.webApi + "/notice/sys/noticeSysMessageRecordPageList", {noticeReadState: 0,page:1,limit:10}).then(res => {
      if (!!res) {
        let mainNoticeData = [];
        res.data.data.forEach(function(k,i){
          //时间  图片
          var date = new Date(that.public.timeFormatting(new Date(), "yyyy-MM-dd") + ' 00:00:00').getTime();
          var noticeExpireTime =  new Date(k.noticeExpireTime + ' 23:59:59').getTime();
          if(noticeExpireTime > date){// 失效 > 当天
            if(!!k.noticeImg){//图片存在
              mainNoticeData.push(k)
            }
          }
          that.mainNoticeData = mainNoticeData;

          if(that.mainNoticeData.length > 0){
            //操作已读
            that.haveReadRequests(null,0);
          }
        })
      }
    }).catch(err => {
      console.log("失败", err)
    })






    //缓存消息提醒
    if (!!sessionStorage.getItem("messageRemind")) {
      if (sessionStorage.getItem("messageRemind") == 'true') {
        this.$store.dispatch("setMessageRemind", true)
        sessionStorage.setItem("messageRemind", 'true')
      } else {
        this.$store.dispatch("setMessageRemind", false)
        sessionStorage.setItem("messageRemind", 'false')
      }
    } else {
      this.$store.dispatch("setMessageRemind", false)
      sessionStorage.setItem("messageRemind", 'false')
    }


    console.log("%c客服热线 :0319-3303099\n\n" +
      "Q Q : 3488987793\n\n" +
      "联系地址 : 河北省邢台经济开发区好望角国际物流园A区16号", 'color:#f00');


    //如果有存储用户数据 触发
    if (!!sessionStorage.getItem('loginData')) {
      that.menuLista();
    }

    // //定时刷新通知
    // that.promptlyNotify('')
    // that.instantMessaging = setInterval(function(){
    //   that.promptlyNotify(that.public.timeFormatting(new Date(new Date().getTime() - 30 * 1000), "yyyy-MM-dd hh:mm:ss"));
    // },30000)


    this.qrcode()
  },
  methods: {//执行的方法
    //通知详情
    noticeDetails(data){
      let that = this;
      if(!!data.noticeHtml){
        window.open(data.noticeHtml)
        // that.noticeData = data;
        // that.modal = true;
        // that.mainNoticeData = [];
      }
    },
    //已读请求
    haveReadRequests(oldValue,num){
      let that = this;
      if(!that.mainNoticeData[num].readState){
        that.axios.post(that.apiUrl.webApi + "/notice/sys/noticeSysMessageRecordRead", {uuid: that.mainNoticeData[num].uuid})
        that.mainNoticeData[num].readState = true;
      }
    },
    //企业画像
    deptPortrait(){
      let that = this;
      let routeData = that.$router.resolve({
        name: "deptDetails",
        query: { uuid: that.userInfoData.coreDeptEntity.uuid },
      });
      window.open(routeData.href, '_blank');
    },
    //首页
    homeFun() {
      this.actionData = {
        menus: [],
        id: 999
      };
      sessionStorage.setItem("menuData", JSON.stringify(this.actionData));
      this.navType = false;
      this.$nextTick(function () {
        this.navType = true;
      })
      this.$router.push({
        path: '/dept'//noticeList
      })
    },
    //及时通知
    promptlyNotify(data) {
      var that = this;

      //全局右侧弹出通知提醒
      that.axios.post(that.apiUrl.webApi + "/system/message/list", {createStartTime: data}).then(res => {
        if (!!res) {
          res.data.data.forEach(function (k, i) {
            that.$Notice.info({
              title: k.messageTitle,
              duration: 30,
              desc: k.messageContent
            });
          })

        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    qrcode() {
      let that = this;
      //365安运通
      new this.$QRCode('qrcode1', {
        width: 220,
        height: 220,
        text: "http://xdbj.net.cn/static/ApplicationDownload1.html", // 二维码地址
        // text: "http://172.16.18.112:8888/static/ApplicationDownload.html", // 二维码地址
      })
      this.$refs.qrcode1.removeAttribute('title');
      //信达宝驾
      new this.$QRCode('qrcode2', {
        width: 220,
        height: 220,
        text: "http://xdbj.net.cn/static/ApplicationDownload.html", // 二维码地址
        // text: "http://172.16.18.112:8888/static/ApplicationDownload.html", // 二维码地址
      })
      this.$refs.qrcode2.removeAttribute('title');
    },
    //缩略图查看
    handleView() {
      this.visible = true;
    },
    menuLista() {
      var that = this;
      //获得菜单数据
      that.platformList = JSON.parse(sessionStorage.getItem('loginData')).navList;
      that.userInfoData = JSON.parse(sessionStorage.getItem('loginData')).user;
      //获得系统缓存选中的项目、菜单
      if (!!sessionStorage.getItem('menuData')) {
        that.actionData = JSON.parse(sessionStorage.getItem('menuData'));
        that.navType = true;
      } else {
        sessionStorage.setItem("menuData", JSON.stringify({menus: [], id: 999}));
        that.actionData = JSON.parse(sessionStorage.getItem('menuData'));
        that.navType = true;
      }
    },
    //退出
    logOffFun() {
      var that = this;
      var data = {access_token: JSON.parse(sessionStorage.getItem('loginData')).access_token};
      data = that.qs.stringify(data);
      that.axios.post(that.apiUrl.logout, data, {headers: {'Content-Type': "application/x-www-form-urlencoded"}}).then().catch(err => {
        console.log('失败', err);
      })
      that.userInfoData = null;
      sessionStorage.clear();// 删除所有数据
      that.$router.push({
        path: '/'
      })
      // location.reload()
    },
    //头部点击
    platformSelect(data) {
      if (data.moduleStatus != 1) {//关闭使用
        this.$Message.warning({
          content: "功能维护中，请耐心等待！对您工作造成的不便，敬请谅解！",
          duration: 5,
        });
        return false;
      }
      sessionStorage.setItem("menuData", JSON.stringify(data));
      this.navType = false;
      this.actionData = data;
      this.$nextTick(function () {
        this.navType = true;
        this.$router.push({
          path: this.loopRouting(data.menus)
        })
      })

    },
    //递归获取菜单第一个页面
    loopRouting(data) {
      for (let i = 0; i < data.length; i++) {//循环路由数据
        if (data[i].children.length > 0) {//有子级 递归再次循环
          return this.loopRouting(data[i].children)
        } else {//没有子级
          return data[i].menuUrl;
        }
      }
    },
    //登录框
    loginFun() {
      this.formInline = {}
      this.loginBoxType = true;
    },
    //通知
    noticeFun() {
      this.actionData = {
        menus: [],
        id: 998
      };
      sessionStorage.setItem("menuData", JSON.stringify(this.actionData));
      this.navType = false;
      this.$nextTick(function () {
        this.navType = true;
      })
      this.$router.push({
        path: '/noticeList'//noticeList
      })
    },
    //个人中心
    personalCenter() {
      var that = this;
      that.actionData = {
        //id, menuHide,children,name,menuUrl
        menus: [
          {
            "id": -1, "name": "个人信息", "menuHide": true, "menuUrl": null,
            "children": [
              {"id": -2, "name": "个人信息", "menuHide": false, "menuUrl": "personalDetails", "children": []},
            ]
          },
          {
            "id": -5, "name": "修改密码", "menuHide": true, "menuUrl": null,
            "children": [
              {"id": -6, "name": "修改密码", "menuHide": false, "menuUrl": "changePassword", "children": []},
            ]
          },
        ],
        id: 900
      };
      sessionStorage.setItem("menuData", JSON.stringify(that.actionData));
      that.navType = false;
      let url = 'personalDetails';
      that.$router.push({
        path: url
      })
      that.$nextTick(function () {
        that.navType = true;
      })

    },
    //调用父级方法 更新用户数据
    updatingUserData() {
      var that = this;
      //获取当前登录用户信息
      that.axios.post(that.apiUrl.webApi + '/system/login/userInfo', {}).then(res => {
        if (!!res) {
          var getNowUser = res.data.data;
          //企业信息
          that.axios.post(that.apiUrl.webApi + "/core/dept/coreDeptInfo", {uuid: getNowUser.deptUuid}).then(res => {
            if (!!res) {

              getNowUser.coreDeptEntity = res.data.data;
              var data = JSON.parse(sessionStorage.getItem('loginData'));
              data.user = getNowUser;
              sessionStorage.setItem("loginData", JSON.stringify(data));
              that.userInfoData = JSON.parse(sessionStorage.getItem('loginData')).user;

            }
          }).catch(err => {
            that.spinShow = false;
            console.log("失败", err)
          })
        }
      }).catch(err => {
        that.spinShow = false;
        console.log("失败", err)
      })
    },
    //查看帮助
    viewHelp() {
      const {href} = this.$router.resolve({
        name: "viewHelp",
      });
      window.open(href, '_blank');
      // this.$router.push({
      //   path: '/viewHelp'
      // })
    },
  },
  watch: {//监听
    viewHelpSrc(news, old) {
      if (!!news && news.length > 0) {
        this.materialData = {
          mp4Url: '/help/综合管理平台/' + news
        }
        this.viewHelpType = true;
      }
    },
    messageRemind(news, old) {
      var that = this;
      if (news) {
        //定时刷新通知
        that.promptlyNotify('')
        that.instantMessaging = setInterval(function () {
          that.promptlyNotify(that.public.timeFormatting(new Date(new Date().getTime() - 30 * 1000), "yyyy-MM-dd hh:mm:ss"));
        }, 30000)
      }
    }
  },

  props: {//接收来自父组件的数据
  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态
    clearInterval(this.instantMessaging)
  }
}
</script>
<style lang="less">
._wz_terraceLogin {
  width: 100%;
  height: 100%;

  ._wz_deptPortrait {
    letter-spacing: 3px;
    font-size: 12px;
    color: #5cadff;
    margin: 10px 0 0 0;
    cursor: pointer;
  }
  ._wz_deptPortrait:hover{
    color: #2d8cf0;
  }

  .ivu-layout-sider {
    background: none;
  }

  ._wz_main_left:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    //TODO
     background: url('../../assets/12.png') no-repeat;
    //background: url('../../assets/12-d.png') no-repeat;
    filter: grayscale(100%);
    //background-size: 300px;
    background-size: 200px;
    background-position: right bottom;
    top: 0px;
    left: 0px;
  }

  ._wz_main_left {
    text-align: center;
    overflow: auto;

    ._wz_main_leftOne {
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      /*min-height: 830px;*/

      ._wz_operationHelp {
        //position: absolute;
        //bottom: 0px;
        //left: 0px;
        width: 100%;
        line-height: 40px;
        cursor: pointer;
        color: #2d8cf0;
      }


      ._wz_main_logo {
        height: 64px;
        width: 100%;
      }

      ._wz_logOff {
        font-size: 12px;
        margin: auto;
        display: inline-block;
        padding: 5px 30px;
        border: 1px solid #9B9B9B;
        color: #9B9B9B;
        border-radius: 30px;
        cursor: pointer;
        letter-spacing: 2px;
      }

      ._wz_logOff:hover {
        color: #fff;
      }

      ._wz_navParent {
        margin: 10px 0 0 0;
        height: 100%;
        overflow: auto;

        div {
          cursor: pointer;
          line-height: 50px;
          text-align: center;
          /*padding: 0 0 0 50px;*/

          i {
            margin: 0 10px 0 0;
          }
        }
      }

      ._wz_navParent::-webkit-scrollbar {
        width: 0px;
        height: 0px;
      }

      ._wz_navParent div:hover {
        background: #4e4e4e;
        /*color: #2d8cf0;*/
      }

      ._wz_navParent_select {
        background: #4e4e4e;
        /*color: #2d8cf0;*/
      }
    }

  }


  ._wz_foot {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    background: #fff;
    overflow: hidden;

    a {
      color: #2c3e50;
    }

    span {
      margin: 0 15px;
      letter-spacing: 2px;
    }

    img {
      vertical-align: middle;
    }
  }


  ._wz_cent_main {
    background: #f5f7f9;
    padding: 10px;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: auto;
  }
}


//统一车牌颜色
._wz_vehiclePlateColor {
  display: inline-block;
  height: 22px;
  line-height: 22px;
  padding: 0 5px;
  font-size: 14px;
  white-space: nowrap;
  text-align: center;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

//登录
._wz_login {
  padding: 0px;

  .ivu-modal-body {
    padding: 0px;
  }

}

._wz_user_operate {
  width: 100%;
  //background: #2d8cf0;
  margin: auto;
  line-height: 40px;
  padding: 0 5px;

  i {
    cursor: pointer;
    font-size: 16px;
    padding: 0px 5px;
  }
}

._wz_qrcode {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 6px;
  display: inline-block;
  margin: auto;
  position: relative;

  img {
    display: block;
  }
}

.ivu-badge-dot {
  top: 8px !important;
  right: 0px !important;
}
._wz_main_notice{
  display: flex;
  align-items: center;
  justify-content: center;

  .ivu-modal{
    top: 0;
  }
  .ivu-modal-body{
    padding: 0px;
    ._wz_main_notice_div{
      width: 800px;
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;

      img{
        display: block;
        max-width: 95%;
        max-height: 95%;
        min-width: 35%;
        min-height: 35%;
      }
    }
  }
  .ivu-modal-close{
    top: auto;
    bottom: -55px;
    right: 50%;
    border: 2px solid #fff;
    border-radius: 50%;
    .ivu-icon-ios-close{
      color: #fff;
    }
  }
  .ivu-modal-close:hover{
    border-color: #eee;
  }
  .ivu-modal-close:hover .ivu-icon-ios-close{
    color: #eee;
  }
  .ivu-modal-content{
    background: none;
    box-shadow: 0 0 0;
  }
}
._wz_main_carousel{
  width: 100%;
  height: 500px;

}
</style>

